<template>
<div>
  <div :id="chartsId" :style="{width: '900px', height: '500px'}" class="my-chart"></div>
</div>
</template>

<style lang="scss" scoped>
div{
    margin: 30px 0;
}
</style>

<script>
export default {
  props: ['chartsId','keyName', 'data', 'name', 'val'],
  data(){
      return {}
  },
  mounted(){
      this.desc();
  },
  watch: {
      data(){
          let self = this;
          let myChart5 = this.$echarts.init(document.getElementById(this.chartsId));
          myChart5.setOption({
              title: {
                  text: self.data.name + '优惠力度变化图'
              },
              legend: {
									data: self.name
              },
              series: function(){
									let arr = [];
									for(let i = 0; i < self.name.length; i++){
										let obj = {};
										obj.name = self.name[i];
										obj.stack = 'a' + i;
										let item = '';
										if(i == 0){
											item = 'discounts_benpin_' + self.val[i];
										}else{
											item = 'discounts_jingpin_' + self.val[i];
										}
										obj.data = self.data[item].relaDiscount;
										obj.type = 'line';
										arr.push(obj);
									}
									console.log('arr: ', arr);
									return arr;
              }()
          })
      }
  },
  methods: {
      desc(){
          let myChart5 = this.$echarts.init(document.getElementById(this.chartsId));
          myChart5.setOption({
            title: {
                text: '省份优惠力度变化图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['CR-V','途观','RAV-4','奇骏','翼虎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: function(){
                  let list = [];
                  let year = new Date().getFullYear();//当前年
                  let month = new Date().getMonth()+1;//当前月
                  month = month + 12; 
                  //生成x轴坐标
                  for(let i = 1; i <= 12; i++){
                    if((month-i)/12 == 1) --year;
                    let temMonth = (month-i) % 12;
                    if(temMonth == 0) temMonth = 12;
                    let item = year + '-' + temMonth;
                    list.unshift(item);
                  }
                  return list;
              }(),
            },
            yAxis: {
                type: 'value',
                mix: 0,
                axisLabel: {
                  formatter: '{value} 万'
                }
            },
            series: [
                
            ]
        })
      }
  }
}
</script>
